<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>svg</title>
  <link rel="stylesheet" href="./../css/index.css">
  <style>
    circle {
      fill: #f00;
    }
  </style>
  <script src="./../js/vendor/commonjs-simulator.min.js"></script>
</head>

<body>
  <h1>Line commands</h1>
  <div class="layout-wrapper">
    <div class="layout-item">
      <h3>Move to</h3>
      <svg width="200" height="200" version="1.2" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 10"></path>
        <!-- Points -->
        <circle cx="10" cy="10" r="2" fill="red"></circle>
      </svg>
    </div>
    <div class="layout-item">
      <h3>Line to</h3>
      <svg width="200" height="200" version="1.2" xmlns="http://www.w3.org/2000/svg" id="svg02">
        <!-- Points -->
      </svg>
    </div>
  </div>


</body>

</html>
<!--<script src='../../node_modules/d3/dist/d3.js'></script>-->
<script type="module">
  import { d3 } from "../js/index.js";

  {
    const d3Svg = d3.select('#svg02');
    d3Svg.append('path')
      .attr('d', 'M10 10 H 90 V 90 H 10 L 10 10');

    const points = [
      [10, 10], // move to
      [90, 10], // H 90
      [90, 90], // V 90
      [10, 90], // H 10
    ];

    d3Svg.selectAll('circle')
      .data(points).enter()
      .append('circle')
      .attr('cx', d => d[0])
      .attr('cy', d => d[1])
      .transition()
      .duration(1000)
      .delay((d, i) => i * 500)
      .attr('r', 5);
  }


</script>